import React, { useEffect, useState } from 'react'
import { LeftOutlined } from '@ant-design/icons';
import { getUser2Djm, getmsjhomesdeatil, zwydingdanAdd } from '../../api/api';
import { Link, useNavigate } from 'react-router-dom';
import { Radio } from 'antd';
import { Modal } from 'antd';

export default function Dingdan() {
  const phone = sessionStorage.getItem('user')
  const userid = sessionStorage.getItem('id')
  const number = sessionStorage.getItem('number')
  const navigate = useNavigate()
  const [user,setUser] = useState({})
  const [time,setTime] = useState('')
  const [value, setValue] = useState(1);
  const [song, setSong] = useState('');
  const [money,setMoney] = useState('')

  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleOk = () => {
    setIsModalOpen(false);
    let a = ''
    time.slice(0,2) > 13 ? a = '配送完成': a = '正在配送'
    let obj = {...money,time,dizhi:user.shou,zhifu:value,user:userid,song:a,ping:'',id:''}
    delete obj.id;
    zwydingdanAdd(obj).then(res=>console.log(res))
    navigate(`/dinglist`)
  };
  const handleCancel = () => {
    console.log(111111111);
    setIsModalOpen(false);
    navigate(`/ZfJieGuo`)
  };
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  useEffect(()=>{
    getmsjhomesdeatil(number).then(res=>{
      console.log(res);
      setMoney(res.data)
    })
    getUser2Djm(phone).then(res=>setUser(res.data))
  },[])
  return (
    <div style={{padding:'0 10px',boxSizing:'border-box'}}>
      <header style={{display:'flex',alignItems: 'center',justifyContent: 'space-between',padding:'0 10px',height:'50px'}}>
        <LeftOutlined onClick={()=>{
          window.history.back()
        }}/>
        <h4>订单信息</h4>
        <div> </div>
      </header> 
      <p>送达时间</p>
      <div style={{width:'100%',height:'200px',display:'flex',flexDirection: 'column',justifyContent: 'space-between'}}>
        <div  style={{width:'100%',height:'98px',display:'flex',justifyContent: 'space-between'}}>
          <div style={{width:'33%',height:'100%',lineHeight:'98px',textAlign:'center',border:'1px solid black',borderRadius:'20px'}} onClick={()=>setTime('11:00')}>11:00</div>
          <div style={{width:'33%',height:'100%',lineHeight:'98px',textAlign:'center',border:'1px solid black',borderRadius:'20px'}} onClick={()=>setTime('12:00')}>12:00</div>
          <div style={{width:'33%',height:'100%',lineHeight:'98px',textAlign:'center',border:'1px solid black',borderRadius:'20px'}} onClick={()=>setTime('13:00')}>13:00</div>
        </div>
        <div style={{width:'100%',height:'98px',display:'flex',justifyContent: 'space-between'}}>
          <div style={{width:'33%',height:'100%',lineHeight:'98px',textAlign:'center',border:'1px solid black',borderRadius:'20px'}} onClick={()=>setTime('14:00')}>14:00</div>
          <div style={{width:'33%',height:'100%',lineHeight:'98px',textAlign:'center',border:'1px solid black',borderRadius:'20px'}} onClick={()=>setTime('15:00')}>15:00</div>
          <div style={{width:'33%',height:'100%',lineHeight:'98px',textAlign:'center',border:'1px solid black',borderRadius:'20px'}} onClick={()=>setTime('16:00')}>16:00</div>
        </div>
      </div>
      <p>收货地址</p>
        {user.shou != '' ?<p>{user.shou}</p> : <Link to='/dizhi'  style={{color:'black',textDecoration:'none'}}><p onClick={()=>{
            navigate(`/dizhi`)
        }}>请设置收货地址</p></Link>}
        <p>支付方式</p>
        <div>
        <Radio.Group onChange={onChange} value={value}>
          <Radio value={'微信'}>微信</Radio>
          <Radio value={'支付宝'}>支付宝</Radio>
        </Radio.Group>
        </div>
        <div style={{position:'absolute',bottom:'0',height:'50px',display:'flex',width:'100%',height:'50px',justifyContent: 'space-between',alignItems: 'center'}}>
          <div style={{width:'30%',height:'100%',lineHeight:'50px',textAlign:'center'}}>￥{money.price}</div>
          <div style={{width:'30%',height:'100%',lineHeight:'50px',textAlign:'center',background:'#FDF2E1'}} onClick={()=>{
            setIsModalOpen(true);
          }}>提交</div>
          <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            请支付￥{money.price}
          </Modal>
        </div>
    </div>
  )
}
